<template>
    <el-row :gutter="20">
        <el-col :span="6" :xs="24">
            <el-card class="card">
                <div slot="header">今日签约用户</div>
                <div class="count">{{ data.todaySign  }}</div>
                <img src="../../../assets/icons/user.png" />
                <div class="bottom">
                    <div class="title">昨日用户</div>
                    <div class="number">{{ data.ydaySign }}人</div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6" :xs="24">
            <el-card class="card">
                <div slot="header">今日投诉</div>
                <div class="count">{{ data.todayFeedback | fmtMoney}}</div>
                <img src="../../../assets/icons/order.png" />
                <div class="bottom">
                    <div class="title">昨日投诉</div>
                    <div class="number">{{ data.ydayFeedback| fmtMoney }}</div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6" :xs="24">
            <el-card class="card">
                <div slot="header">今日打卡比例</div>
                <div class="count">{{ data.todayClockin.completion_rate | 0}} %</div>
                <img src="../../../assets/icons/price.png" />
                <div class="bottom">
                    <div class="title">昨日打卡比例</div>
                    <div class="number">{{ data.ydayClockin.completion_rate | 0}}%</div>
                </div>
            </el-card>
        </el-col>
        <!-- <el-col :span="6" :xs="24">
            <el-card class="card">
                <div slot="header">商户数量</div>
                <div class="count">{{ data.storeTotalCount | fmtMoney}}</div>
                <img src="../../../assets/icons/store.png" />
                <div class="bottom">
                    <div class="title">今日新增</div>
                    <div class="number">{{ data.storeCount  | fmtMoney}}家</div>
                </div>
            </el-card>
        </el-col> -->
    </el-row>
</template>

<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            data: {}
        }
    },
    mounted() {
        this.load()
    },
    methods: {
        async load() {
            this.data = await request.get(`admin/count2`)
        }
    }
}
</script>

<style lang="scss" scoped>
.count{font-size: 24px; font-weight: 500;}
.card{
    position: relative;
    margin-top: 15px;
}
img{
    position: absolute;
    width: 40px;
    height: 40px;
    right: 20px;
    bottom: 50px;
}
.bottom{
    margin-top: 14px;
    display: flex;
    justify-content: space-between;
    
}
</style>